import React, { useState, useEffect } from 'react';
import { Modal, Form, Select, Button, Spin } from 'antd';
import { Group, getGroupList } from '@/utils/api/group/group';

const { Option } = Select;

interface JoinGroupModalProps {
    visible: boolean;
    onCancel: () => void;
    onJoin: (groupId: number) => void;
    loading: boolean;
}

const JoinGroupModal: React.FC<JoinGroupModalProps> = ({
                                                           visible,
                                                           onCancel,
                                                           onJoin,
                                                           loading
                                                       }) => {
    const [form] = Form.useForm();
    const [groups, setGroups] = useState<Group[]>([]);
    const [groupsLoading, setGroupsLoading] = useState<boolean>(false);

    // 获取所有小组
    const fetchAllGroups = async () => {
        try {
            setGroupsLoading(true);
            const response = await getGroupList({});
            setGroups(response.data.list || []);
        } catch (error) {
            console.error('获取小组列表失败:', error);
        } finally {
            setGroupsLoading(false);
        }
    };

    // 处理确认加入
    const handleOk = async () => {
        try {
            const values = await form.validateFields();

            Modal.confirm({
                title: '确认加入小组',
                content: '您确定要加入这个小组吗？',
                onOk: () => onJoin(values.groupId),
            });
        } catch (error) {
            console.error('表单验证失败:', error);
        }
    };

    // 当模态框显示时获取小组列表
    useEffect(() => {
        if (visible) {
            fetchAllGroups();
            form.resetFields();
        }
    }, [visible, form]);

    return (
        <Modal
            title="加入小组"
            open={visible}
            onCancel={onCancel}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    取消
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    loading={loading}
                    onClick={handleOk}
                >
                    确定
                </Button>,
            ]}
            destroyOnClose={true}
        >
            <Spin spinning={groupsLoading}>
                <Form form={form} layout="vertical">
                    <Form.Item
                        name="groupId"
                        label="选择小组"
                        rules={[{ required: true, message: '请选择要加入的小组' }]}
                    >
                        <Select placeholder="请选择小组" loading={groupsLoading}>
                            {groups.map(group => (
                                <Option key={group.id} value={group.id}>
                                    {group.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                </Form>
            </Spin>
        </Modal>
    );
};

export default React.memo(JoinGroupModal);